<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>flex-grow设置一个孩子自动伸缩占用剩余部分</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .main {
      width: 600px;
      margin: 0 auto;
      border: 1px solid #000;
    }
    .flex-wrapper {
      display: flex;
      height: 500px;
    }
    .item {
      flex-basis: 50px;
      background: #ccc;
      padding: 10px;
      border: 1px solid #000;
    }
    .item1 {
      background: red;
    }
    .box {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-grow: 1;
      background: #eee;
      border: 1px solid #000000;
      padding: 5px;
    }
    .box input {
      width: 50px;
    }
    .box-item {
      display: flex;
      text-align: center;
    }
    .buttons {
      margin: 10px 0;
    }
    button {
      width: 30px;
      height: 30px;
      text-align: center;
    }
  </style>
</head>
<body style="display: flex;">
  <div class="main">
    <div class="flex-wrapper">
      <div class="item item1">11111</div>
      <div class="item">22222</div>
      <div class="item">33333</div>
      <div class="item">44444</div>
    </div>
    
    <form action="" class="main">
      <label for="radio1">
        <input type="radio" id="radio1" name="radio" value="row" checked>row行、横
      </label>
      <label for="radio2" style="margin-left: 20px">
        <input type="radio" id="radio2" name="radio" value="column">column列、竖
      </label>
      <div>
        <label for="radio11">
          <input type="radio" id="radio11" name="radio1" value="0" checked>0（默认）
        </label>
        <label for="radio22" style="margin-left: 20px">
          <input type="radio" id="radio22" name="radio1" value="1">1
        </label>
      </div>
    </form>
  </div>
 
  <div class="main">
    <h1>实际动手操作，搞懂 flex-grow的作用</h1>
    <div class="flex-wrapper">
      <div class="box box1">
        <div class="box-item">
          <div>
            <h2>flex-grow: <span id="flex-grow1">1</span></h2>
            <div class="buttons">
              <button id="box1-btn1">-</button>
              <button id="box1-btn2">+</button>
            </div>
            <div>占用： <span id="flex-grow1-num">1/2</span></div>
          </div>
        </div>
      </div>
      <div class="box box2">
        <div class="box-item">
          <div>
            <h2>flex-grow: <span id="flex-grow2">1</span></h2>
            <div class="buttons">
              <button id="box2-btn1">-</button>
              <button id="box2-btn2">+</button>
            </div>
            <div>占用： <span id="flex-grow2-num">1/2</span></div>
          </div>
        </div>
      </div>
    </div>
    <h4 style="padding: 5px">
      总结：
      <span id="text-count"></span>
    </h4>
  </div>
  
  <script>
    window.onload = function () {
      const TEXT1 = 'flex-grow都为0的时候，两个孩子都会缩小到他们最小的舒适尺寸（能放下内容的宽度），额外的空间不会被分配。'
      const TEXT2 = '当一个孩子的flex-grow为0，另一个孩子被赋予正的弹性增长值时，它会吞噬掉所有额外的空间。在这种情况下，数字是多少并不重要:1和1000具有相同的效果。'
      let textCount = '当第一个孩子有1个单位的空间，第二个孩子有1个单位的空间。这意味着单元的总数是2 (1 + 1)。每个孩子都会按比例分享额外的空间。'
      
      let textCountDom = document.querySelector('#text-count');
      textCountDom.innerHTML = textCount
      
      let flexWrapper = document.querySelector('.flex-wrapper');
      let item1 = document.querySelector('.item1');
      let radio1 = document.querySelector('#radio1');
      let radio2 = document.querySelector('#radio2');
      let radio11 = document.querySelectorAll('input[name=radio1]');
      
      radio1.addEventListener('change', function () {
        flexWrapper.style.flexDirection = this.value;
      })
      radio2.addEventListener('change', function () {
        flexWrapper.style.flexDirection = this.value;
      })
      for (let i = 0; i < radio11.length; i++) {
        radio11[i].addEventListener('change', function () {
          item1.style.flexGrow = this.value;
        })
      }
      let box1 = document.querySelector('.box1');
      let box2 = document.querySelector('.box2');
      let box1Btn1 = document.querySelector('#box1-btn1');
      let box1Btn2 = document.querySelector('#box1-btn2');
      let box2Btn1 = document.querySelector('#box2-btn1');
      let box2Btn2 = document.querySelector('#box2-btn2');
      
      function updateFlexGrowValues(flexGrow1, flexGrow2) {
        let flexGrow1Temp = String(flexGrow1);
        let flexGrow2Temp = String(flexGrow2);
        let nums = parseInt(flexGrow1Temp) + parseInt(flexGrow2Temp);
        
        // 更新显示值
        document.querySelector('#flex-grow1-num').innerText = (parseInt(flexGrow1Temp) === 0 ? '0' : `${flexGrow1Temp}/${nums}`);
        document.querySelector('#flex-grow2-num').innerText = (parseInt(flexGrow2Temp) === 0 ? '0' : `${flexGrow2Temp}/${nums}`);
        
        // 更新描述文本
        const textCountDom = document.querySelector('#text-count');
        if (parseInt(flexGrow1Temp) === 0 && parseInt(flexGrow2Temp) === 0) {
          textCount = TEXT1;
        } else if ((parseInt(flexGrow1Temp) === 0 && parseInt(flexGrow2Temp) !== 0) || (parseInt(flexGrow2Temp) === 0 && parseInt(flexGrow1Temp) !== 0)) {
          textCount = TEXT2;
        } else {
          textCount = `当第一个孩子有${flexGrow1Temp}个单位的空间，第二个孩子有${flexGrow2Temp}个单位的空间。这意味着单元的总数是${nums} (${flexGrow1Temp} + ${flexGrow2Temp})。每个孩子都会按比例分享额外的空间。`;
        }
        textCountDom.innerHTML = textCount;
      }

// 事件处理函数
      box1Btn1.addEventListener('click', function () {
        let flexGrow1 = parseInt(document.querySelector('#flex-grow1').innerText);
        if (flexGrow1 > 0) {
          flexGrow1--;
          box1.style.flexGrow = flexGrow1;
          document.querySelector('#flex-grow1').innerText = String(flexGrow1);
          updateFlexGrowValues(flexGrow1, parseInt(document.querySelector('#flex-grow2').innerText));
        }
      });
      
      box1Btn2.addEventListener('click', function () {
        let flexGrow1 = parseInt(document.querySelector('#flex-grow1').innerText);
        flexGrow1++;
        box1.style.flexGrow = flexGrow1;
        document.querySelector('#flex-grow1').innerText = String(flexGrow1);
        updateFlexGrowValues(flexGrow1, parseInt(document.querySelector('#flex-grow2').innerText));
      });
      
      box2Btn1.addEventListener('click', function () {
        let flexGrow2 = parseInt(document.querySelector('#flex-grow2').innerText);
        if (flexGrow2 > 0) {
          flexGrow2--;
          box2.style.flexGrow = flexGrow2;
          document.querySelector('#flex-grow2').innerText = String(flexGrow2);
          updateFlexGrowValues(parseInt(document.querySelector('#flex-grow1').innerText), flexGrow2);
        }
      });
      
      box2Btn2.addEventListener('click', function () {
        let flexGrow2 = parseInt(document.querySelector('#flex-grow2').innerText);
        flexGrow2++;
        box2.style.flexGrow = flexGrow2;
        document.querySelector('#flex-grow2').innerText = String(flexGrow2);
        updateFlexGrowValues(parseInt(document.querySelector('#flex-grow1').innerText), flexGrow2);
      });
      
    }
  </script>
</body>
</html>